<template>

	<view class="wrap">

		<!-- 轮播图 -->
		<u-swiper :height="270" :list="imgList" :title="false" @click="imgListClick"></u-swiper>

		<!-- 常用应用 -->
		<view class="workbench-title">常用应用</view> 
		<view class="toolbar">
			<u-grid class="grid" :col="4" :border="false">
				<u-grid-item :index="0" @click="navTo('')">
					<view class="home-icon icon-color01">
						<i class="iconfont icon-qingjia"></i>
					</view>
					<view class="grid-text">请假申请</view>
				</u-grid-item>
				<u-grid-item :index="1" @click="navTo('')">
					<view class="home-icon icon-color04">
						<i class="iconfont icon-hetongguanli"></i>
					</view>
					<view class="grid-text">合同申请</view>
				</u-grid-item>
				<u-grid-item :index="2" @click="navTo('')">
					<view class="home-icon icon-color03">
						<i class="iconfont icon-chucha"></i>
					</view>
					<view class="grid-text">出差申请</view>
				</u-grid-item>
				<u-grid-item :index="2" @click="navTo('')">
					<view class="home-icon icon-color12">
						<i class="iconfont icon-ribao"></i>
					</view>
					<view class="grid-text">日报</view>
				</u-grid-item>
				<u-grid-item @click="navTo('')">
					<view class="home-icon icon-color04">
						<i class="iconfont icon-tongzhi"></i>
					</view>
					<view class="grid-text">邮件</view>
				</u-grid-item>
				<u-grid-item @click="navTo('')">
					<view class="home-icon icon-color05">
						<i class="iconfont icon-huiyishi"></i>
					</view>
					<view class="grid-text">会议室</view>
				</u-grid-item>
				<u-grid-item @click="navTo('/pages/sys/workbench/install')">
					<view class="home-icon icon-color13">
						<i class="iconfont icon-tianjia" style="color:#90949d;"></i>
					</view>
					<view class="grid-text">添加常用</view>
				</u-grid-item>
			</u-grid>
		</view>

		<!-- 羊群信息 -->
		<view class="workbench-title">羊群信息</view>
		<view class="toolbar">
			<u-grid class="grid" :col="4" :border="false">
				<u-grid-item :index="0" @click="navTo('/pages/main/sheepFlockInfo/cardInfo')">
					<view class="home-icon icon-color04">
						<i class="iconfont icon-kapian"></i>
					</view>
					<view class="grid-text">卡片信息</view>
				</u-grid-item>
				<u-grid-item :index="1" @click="navTo('/pages/main/sheepFlockInfo/basicInfo')">
					<view class="home-icon icon-color03">
						<i class="iconfont icon-jibenxinxi"></i>
					</view>
					<view class="grid-text">基本信息</view>
				</u-grid-item>
				<u-grid-item :index="2" @click="navTo('/pages/main/sheepFlockInfo/pedigreeFile')">
					<view class="home-icon icon-color12">
						<i class="iconfont icon-zuzhijiegou"></i>
					</view>
					<view class="grid-text">系谱档案</view>
				</u-grid-item>
				<u-grid-item :index="3" @click="navTo('/pages/main/sheepFlockInfo/productionPerformance')">
					<view class="home-icon icon-color04">
						<i class="iconfont icon-xingnengzhenduan"></i>
					</view>
					<view class="grid-text">生产性能</view>
				</u-grid-item>
			</u-grid>
		</view>

		<!-- 配种信息 -->
		<view class="workbench-title">配种信息</view>
		<view class="toolbar">
			<u-grid class="grid" :col="4" :border="false">
				<u-grid-item :index="0" @click="navTo('/pages/main/breedInfo/breedRecord')">
					<view class="home-icon icon-color03">
						<i class="iconfont icon-peizhongqingkuang-copy"></i>
					</view>
					<view class="grid-text">配种记录</view>
				</u-grid-item>
				<u-grid-item :index="1" @click="navTo('/pages/main/breedInfo/lambingInfo')">
					<view class="home-icon icon-color12">
						<i class="iconfont icon-yangzhishujubaobiao"></i>
					</view>
					<view class="grid-text">产羔信息</view>
				</u-grid-item>
			</u-grid>
		</view>

		<!-- 防疫记录 -->
		<view class="workbench-title">防疫记录</view>
		<view class="toolbar">
			<u-grid class="grid" :col="4" :border="false">
				<u-grid-item :index="0" @click="navTo('')">
					<view class="home-icon icon-color04">
						<i class="iconfont icon-yishengbingli"></i>
					</view>
					<view class="grid-text">病例记录</view>
				</u-grid-item>
			</u-grid>
		</view>

		<!-- 销售记录 -->
		<view class="workbench-title">销售记录</view>
		<view class="toolbar">
			<u-grid class="grid" :col="4" :border="false">
				<u-grid-item :index="0" @click="navTo('')">
					<view class="home-icon icon-color04">
						<i class="iconfont icon-a-icon-xiaoshoue-fuben"></i>
					</view>
					<view class="grid-text">销售记录</view>
				</u-grid-item>
			</u-grid>
		</view>

		<!-- 汇总统计 -->
		<view class="workbench-title">汇总统计</view>
		<view class="toolbar">
			<u-grid class="grid" :col="4" :border="false">
				<u-grid-item :index="0" @click="navTo('')">
					<view class="home-icon icon-color04">
						<i class="iconfont icon-siwangyixuezhengming"></i>
					</view>
					<view class="grid-text">死淘分析</view>
				</u-grid-item>
				<u-grid-item :index="1" @click="navTo('')">
					<view class="home-icon icon-color04">
						<i class="iconfont icon-xiaoshouqushi"></i>
					</view>
					<view class="grid-text">收入支出</view>
				</u-grid-item>
				<u-grid-item :index="1" @click="navTo('')">
					<view class="home-icon icon-color04">
						<i class="iconfont icon-shujukanban"></i>
					</view>
					<view class="grid-text">数据分析</view>
				</u-grid-item>
			</u-grid>
		</view>

		<!-- 底部提示 -->
		<u-divider>已经到底了</u-divider>

	</view>

</template>
<script>
	import HeadNavBar from './headnavbar';
	export default {
		components: {
			HeadNavBar
		},
		data() {
			return {
				show: false,
				head: '/static/aidex/images/head.png',
				imgList: [{
						image: '/static/aidex/banner/banner01.jpg'
					},
					{
						image: '/static/aidex/banner/banner02.jpg'
					},
					{
						image: '/static/aidex/banner/banner03.jpg'
					}
				],
				todoCount: 3
			};
		},
		onLoad() {

		},
		methods: {
			navTo(url) {
				console.log('click');
				uni.navigateTo({
					url: url
				});
			},
			imgListClick(index) {
				console.log(`点击了第${index + 1}页图片`)
			},
			itemClick(index) {
				console.log(index);
			}
		}
	};
</script>
<style lang="scss">
	// @import 'index.scss';
	
	.toolbar {
		
		background-color: #fff;
	}
	.wrap .box .item{
		margin: 0 0 0px;
		border-radius: 0;
		.title {
			padding-left:0;
			.text {
				font-size: 30rpx;
				font-weight:500;
				margin: 0;
				color: #202328;
			}
		}
	}
	.grid {
		
		.grid-icon {
			color: #666;
		}
		
		.grid-text {
			font-size: 24rpx;
			padding: 15rpx;
			color: #202328;
		}
	}

	.banner-box {
		padding: 0 2%;
		width: 96%;
		height: 170rpx;
		margin: 30rpx 0 30rpx;
	}

	.u-swiper-wrap {
		padding: 0 10px;
	}

	.banner-pic {
		width: 47%;
		float: left;
		display: inline-block;
		margin: 0 1.5%;
	}

	.banner-pic image {
		width: 100%;
		height: 170rpx;
		border-radius: 12rpx;
		box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
	}

	.u-mode-light-info {
		background-color: #ffffff;
		color: #666666;
		border: 1px solid #e9ecf6;
		font-size: 12px;
		padding: 2px 8px;
		position: relative;
		top: -3px;
	}

	.workbench-title {
		font-size: 32rpx;
		font-weight: bold;
		color: #333333;
		padding: 15px 30rpx;
	}

	.home-icon i.icon-tongzhi {
		font-size: 22px;
	}

	.grid {
		margin-top: 10px;
	}
</style>
